<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="add">新增</el-button>
                </div>

            </template>
            <template #form>
                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="companyCode" label-width="60px" >
                        <SelectSearch v-model="formInline.companyCode" :info="COMPANY_CONFIG" aria-placeholder="请选择公司" @on-selectListData="selectConmpany"></SelectSearch>
                    </el-form-item>
                    <el-form-item prop="invoiceType" label-width="180px">
                        <el-select v-model="formInline.invoiceType" class="w100p" placeholder="不计税发票类型" clearable>
                            <el-option v-for="item in invoiceTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                </SearchForm>
            </template>
            <template #table="tableScope">
                <PubilcTable :table-data="tableData" :showIndex="true" :isSlot="false" :list-config="TABLE_DATA_CONFIG"
                    :page-data="pageData" @on-action="onAction" :translateTextDeal="translateTextDeal"
                    :tableHeight="tableScope.tableHeight" />
            </template>
        </page-view>
        <addAndEditVue v-if="dialogVisible" :dialogVisible="dialogVisible" :type="type" @handleClose="handleClose"
            :dataForm="dataForm" @on-update="onSearch" :invoiceTypeOptions="invoiceTypeOptions"></addAndEditVue>
    </div>
</template>
<script name="noTaxTicketConfig">
import { onMounted, reactive, toRefs } from 'vue'
import { TABLE_DATA_CONFIG, COMPANY_CONFIG } from './Common/config'
import { statusText } from '@/util/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import addAndEditVue from './Common/addAndEdit.vue'
import SelectSearch from '@/components/SelectSearch/index.vue'
export default {
    components: {
        addAndEditVue,
        SelectSearch
    },
    setup() {
        const state = reactive({
            formInline: {
                invoiceType: '',
                companyCode: ''
            },
            pageData: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            tableData: [],
            dialogVisible:false,
            companyList: [],
            TABLE_DATA_CONFIG,
            invoiceTypeOptions: [],
            dataForm: {
                companyCode: '',
                companyName: '',
                invoiceTypeList: []
            },
            type: 'add',
            COMPANY_CONFIG
        })

        const methods = {

            // 可用发票类型
            getCanUseInvoiceType() {
                api.publicApi.canUseInvoiceType().then(res => {
               
                    let newList = []
                    res.forEach(item => {
                        if (!['add_tax_special', 'no_tax'].includes(item.value)) {
                            newList.push({
                                label: item.message,
                                value: item.value
                            })
                        }
                    })
                
                    state.invoiceTypeOptions = newList

                    handleFun.onSearch()
                })
            },
            // 获取列表数据
            getList() {
                const parms = {
                    ...state.pageData,
                    ...state.formInline
                }
                const options = state.invoiceTypeOptions

                api.taxConfig.noTaxConfigList(parms).then(res => {
                    const { list, total } = res
                 
                    list.forEach(item => {
                        let invoceList = []
                        item.invoiceTypeList.forEach(itemTwo => {
                            options.forEach(itemThree => {
                                if (itemTwo == itemThree.value) invoceList.push(itemThree.label)
                            })
                        })
                        item.invoceText = invoceList.join("、")
                    });
                    state.pageData.total = total
                    state.tableData = list

                })

            },


        }

        const handleFun = {
            onSearch() {
                state.pageData.pageNum = 1
                methods.getList()
            },
            translateTextDeal(item, val, row) {
                let text = ''

                return text
            },
            handleClose() {
                state.dialogVisible = false

            },
            delRow(row) {
                ElMessageBox.confirm(
                    '您确定要进行删除操作吗?',
                    '温馨提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        api.taxConfig.deleteNoTax({ companyCode: row.companyCode }).then(res => {
                            handleFun.onSearch()
                            ElMessage.success('操作成功')
                        })
                    })

            },
            // 编辑
            editRow(row) {
                let rows = { ...row }
                delete rows.invoceText
                state.dataForm = rows
                state.type = 'edit'
                state.dialogVisible = true
            },
            // 新增
            add() {
                state.dataForm = {
                    companyCode: '',
                    companyName: '',
                    invoiceTypeList: []
                }
                state.type = 'add'
                state.dialogVisible = true
            },

            // 列表操作 分页
            onAction([item, row]) {
                const obj = {
                    'pageNum': methods.getList,
                    'pageSize': handleFun.onSearch,
                    'del': handleFun.delRow,
                    'edit': handleFun.editRow,
                }
                if (typeof item === 'string') {
                    state.pageData[item] = row
                    obj[item]()
                } else {
                    obj[item.alias](row)
                }
            },
            selectConmpany(list) {
                state.companyList = list
            }

        }
        onMounted(() => {
            methods.getCanUseInvoiceType()

        })

        return {
            ...toRefs(state),
            ...handleFun

        }
    }
}




















</script>
